<template>
  <div class="app-container">
    <!-- 顶部操作区 -->
    <div class="header-container">
      <div class="left-buttons">
        <el-button
          type="primary"
          icon="el-icon-back"
          size="small"
          @click="goBack"
        >
          返回
        </el-button>
      </div>
      <div class="title-container">
        <h2>深圳市艾美思普科技有限公司</h2>
        <h3>文件管制总览表</h3>
      </div>
      <div class="right-buttons">
        <el-button
          type="primary"
          size="small"
          @click="goToList"
        >
          返回列表
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container" v-if="fileCategories">
      <table border="1">
        <thead>
          <tr>
            <th>文件类别：</th>
            <th colspan="6">
              <div class="category-container">
                <el-checkbox v-model="fileCategories.managementManual" :disabled="isViewMode">管理手册</el-checkbox>
                <el-checkbox v-model="fileCategories.procedure" :disabled="isViewMode">程序</el-checkbox>
                <el-checkbox v-model="fileCategories.specification" :disabled="isViewMode">规范</el-checkbox>
                <el-checkbox v-model="fileCategories.technicalDocument" :disabled="isViewMode">技术文件</el-checkbox>
              </div>
            </th>
          </tr>
          <tr>
            <th>序号</th>
            <th>文件编号</th>
            <th>文件名称</th>
            <th>制订部门</th>
            <th>版本</th>
            <th>附表份数</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in formDataList" :key="index">
            <td>{{ index + 1 }}</td>
            <td><input v-model="item.fileNumber" type="text" :disabled="isViewMode"></td>
            <td><input v-model="item.fileName" type="text" :disabled="isViewMode"></td>
            <td><input v-model="item.department" type="text" :disabled="isViewMode"></td>
            <td><input v-model="item.version" type="text" :disabled="isViewMode"></td>
            <td><input v-model="item.scheduleCopies" type="number" :disabled="isViewMode"></td>
            <td><input v-model="item.remarks" type="text" :disabled="isViewMode"></td>
          </tr>
          <tr>
            <td colspan="7" class="action-cell">
              <el-button v-if="!isViewMode" type="primary" size="small" icon="el-icon-plus" @click="addRow">新增行</el-button>
              <el-button v-if="!isViewMode" type="success" size="small" icon="el-icon-check" @click="saveData">保存</el-button>
            </td>
          </tr>
          <tr>
            <td colspan="3">表单编号及版本： AM-FR-0001 A/0 </td>
            <td colspan="2">生效日期：2006年 11月 1日 </td>
            <td colspan="2">保存年限：长期</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { getFileControlDetail, saveFileControl } from '@/api/file-control'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      formDataList: [{
        id: undefined,
        fileNumber: '',
        fileName: '',
        department: '',
        version: '',
        scheduleCopies: 0,
        remarks: ''
      }],
      fileCategories: {
        managementManual: false,
        procedure: false,
        specification: false,
        technicalDocument: false
      },
      isViewMode: false
    }
  },
  created() {
    // 获取路由参数
    const { id, mode } = this.$route.query

    // 设置页面模式
    this.isViewMode = mode === 'view'

    if (id) {
      // 编辑或查看模式，加载数据
      this.loadData(id)
    }
  },
  methods: {
    goBack() {
      this.$router.push('/main/renshi/zhaoping/zhaopingxiudin')
    },
     goToList() {
      this.$router.push('/main/biao/wenjianzl-list')
    },
    loadData(id) {
      getFileControlDetail(id).then(response => {
        const data = response.data.data
        this.formDataList = [{
          id: data.id,
          fileNumber: data.fileNumber,
          fileName: data.fileName,
          department: data.department,
          version: data.version,
          scheduleCopies: data.scheduleCopies,
          remarks: data.remarks
        }]
        // 确保fileCategories有默认值
        this.fileCategories = data.fileCategories || {
          managementManual: false,
          procedure: false,
          specification: false,
          technicalDocument: false
        }
      }).catch(error => {
        Message.error('获取数据失败：' + error.message)
      })
    },
    addRow() {
      this.formDataList.push({
        id: undefined,
        fileNumber: '',
        fileName: '',
        department: '',
        version: '',
        scheduleCopies: 0,
        remarks: ''
      })
    },
    saveData() {
      // 数据验证
      for (let i = 0; i < this.formDataList.length; i++) {
        const item = this.formDataList[i]
        if (!item.fileNumber) {
          Message.error(`第${i + 1}行：请输入文件编号`)
          return
        }
        if (!item.fileName) {
          Message.error(`第${i + 1}行：请输入文件名称`)
          return
        }
        if (!item.department) {
          Message.error(`第${i + 1}行：请输入制订部门`)
          return
        }
        if (!item.version) {
          Message.error(`第${i + 1}行：请输入版本`)
          return
        }
      }

      // 为每一行数据添加文件类别
      const saveDataList = this.formDataList.map(item => ({
        ...item,
        fileCategories: this.fileCategories
      }))

      saveFileControl(saveDataList).then(() => {
        Message({
          type: 'success',
          message: '保存成功！'
        })
        // 返回列表页
        this.$router.push('/main/biao/wenjianzl-list')
      }).catch(error => {
        Message.error('保存失败：' + error.message)
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  /* background-color: #fff; */
  min-height: calc(100vh - 40px);
  width: 1200px;
  margin: 0 auto;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-container {
  text-align: center;
  flex-grow: 1;
}

.title-container h2 {
  font-size: 1.3em;
  margin: 0;
  margin-bottom: 5px;
}

.title-container h3 {
  font-size: 1.1em;
  margin: 0;
}

.left-buttons, .right-buttons {
  min-width: 100px;
}

.table-container {
  margin-top: 20px;
  overflow-x: auto;
}

.category-container {
  display: flex;
  justify-content: space-around;
  padding: 5px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background-color: #fff;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  height: 40px;
  white-space: nowrap;
}

th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

.action-cell {
  padding: 15px;
}

input[type="text"],
input[type="number"] {
  width: 100%;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  font-family: '宋体';
  text-align: center;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="number"]:focus {
  outline: none;
  border-color: #409eff;
}

input[disabled], input:disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

.el-button + .el-button {
  margin-left: 10px;
}
</style>